<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="can" width="500px" height="500px" style="border: dashed 1px;"></canvas>
		<script>
			var can = document.getElementById("can");
			g = can.getContext("2d");
			
			var l = g.createLinearGradient(0,0,0,500);
			l.addColorStop(0,"red");
			l.addColorStop(0.2,"yellow");
			l.addColorStop(0.4,"blue");
			l.addColorStop(0.6,"orange");
			l.addColorStop(0.8,"black");
			l.addColorStop(1,"white");
			
			g.fillStyle = l;
			g.fillRect(0,0,500,500);
		</script>
	</body>
</html>
